<template>
  <div class="double-one">
    <div class="double-top" @click="doubleprev">
      <img
        src="https://hshop.honorfile.com/shopdc/pic/2022113/2/c4b5ee5b-518a-40e5-bc50-c37498eb6b97.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/c4b5ee5b-518a-40e5-bc50-c37498eb6b97.png"
        alt=""
      />
    </div>
    <div class="double-banner">
      <div class="marquee-item">
        <img
          src="https://hshop.honorfile.com/shopdc/cdn/modules/marquee-text/mb/img/xc.png"
          alt=""
        />
        <van-notice-bar
          class="p1"
          background="url(https://hshop.honorfile.com/shopdc/cdn/modules/marquee-text/mb/img/textbg.png)"
          text="荣耀双11 狂送1亿积分，最高百倍膨胀抵现！1.1元享百倍膨胀礼！"
        />
      </div>
      <a href="" @click.prevent="ears" class="earsport"></a>
      <a href="" @click.prevent="phones" class="telphone"></a>
      <a href="" @click.prevent="screen" class="screen"></a>
      <a href="" @click.prevent="ipad" class="ipad"></a>
    </div>
  </div>
</template>

<script>
export default {
  created() {},
  methods: {
    ears() {
      this.$router.push("/ears");
    },
    phones() {
      this.$router.push("/phone");
    },
    doubleprev() {
      this.$router.push("/myhome");
    },
    screen(){
      this.$router.push("/smartscreen")
    },
    ipad(){
      this.$router.push("/flatboard")
    }
  },
};
</script>

<style lang="scss" scoped>
.double-top {
  width: 100%;
  height: 2.9525rem;
}
.double-top img {
  width: 100%;
  height: 100%;
}
.double-banner {
  background: url(https://hshop.honorfile.com/shopdc/pic/2022113/2/4eda60d1-5cb1-4373-80a6-9642f17dd56a.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/4eda60d1-5cb1-4373-80a6-9642f17dd56a.png)
    no-repeat;
  background-size: 100%;
  width: 100%;
  height: 26.8087rem;
  position: relative;
}
.marquee-item {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  top: 8.225rem;
}
.marquee-item img {
  width: 1.125rem;
  height: 1.125rem;
}
.marquee-item .p1 {
  display: inline-block;
  background: url(https://hshop.honorfile.com/shopdc/cdn/modules/marquee-text/mb/img/textbg.png)
    no-repeat;
  background-size: 100% 100%;
  width: 90%;
  border-radius: 0.3125rem;
  overflow: hidden;
  white-space: nowrap;
  text-align: initial;
  line-height: 0.8rem;
  height: 0.8rem;
  position: relative;
  z-index: 1;
  padding: 0 0.5rem 0 0.625rem;
  animation: all 2s;
  transform: translateX(-1.25rem);
  margin-left: 1.625rem;
  color: #fff;
  font-size: .6rem;
}
.telphone{
   position: absolute;
   /* background-color: red; */
   display: block;
   width: 4.875rem;
   height: 5.5rem;
   top: 13.125rem;
   left: 9rem;
} 
.earsport{
  position: absolute;
  // background-color: red;
   width: 2.875rem;
   height: 2.5rem;
   top: 10rem;
   left: 1.5rem;
}
.screen{
  // background-color: red;
  position: absolute;
   width: 13.875rem;
   height: 3.8rem;
   top:9.8rem;
   left:5rem
}
.ipad{
   position: absolute;
   width: 5.875rem;
   height: 3.8rem;
   top:14.8rem;
   left:14rem;
  //  background-color: red;
}
</style>